<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <div class="box">abc</div>
    <div id="id">def</div>
    <h3><span><input type="text"></span></h3>

    <button id="btn">点我一下</button> -->
    <input id="t" type="text"><br />

    <!-- <div>
        <span>hello world1</span>
        <span>hello world2</span>
    </div> -->

    <!-- <img src="../css/1.jpg" alt="这是一朵花" title="玫瑰花"> -->

    <input class="amuse" type="button" value="播放" onclick="startORStop()"><br />

    <input class="cnt" type="text" value="0">
    <input class="inc" type="button" value="+1">
    <input class="dec" type="button" value="-1">

    <br />
    <div class="box">
        <input class="all" type="checkbox">全选<br />
        <input class="select" type="checkbox">选项一<br />
        <input class="select" type="checkbox">选项二<br />
        <input class="select" type="checkbox">选项三<br />
        <input class="select" type="checkbox">选项四<br />
    </div>


    <div class="style1" style="font-size: 10px; font-weight: 700;">哈哈哈</div>

    <div class="container light">
        这是一大段话. <br>
        这是一大段话. <br>
        这是一大段话. <br>
        这是一大段话. <br>
    </div>

    <br />
    <div class="first-level">你好吗</div>

    <br>
    <div class="new-container">
        <div>11</div>
        <div>22</div>
        <div>33</div>
        <div>44</div>
    </div>

</body>
<style>
    /* html, body{
        width: 100%;
        height: 100%;
    } */

    .container {
        width: 100%;
        height: 100%;
    }

    .light {
        background-color: white;
        color: black;
    }

    .dark {
        background-color: black;
        color: white;
    }
</style>
<script>
    // 一、事件
    // 事件三要素
    // 1、事件源: 哪个元素触发的
    // 2、事件类型: 是点击, 选中, 还是修改
    // 3、事件处理程序: 进一步如何处理.往往是一个回调函数
    //（二）点击事件
    // var btn = document.getElementById('btn');
    // btn.onclick = function () {
    //     alert("hello world");
    // }
    // btn 按钮就是事件源，点击就是事件类型，function这个匿名函数就是事件处理程序
    // 其中btn.onclick=function()这个操作称为注册事件/绑定事件

    // (二)键盘事件
    // 常见的键盘事件
    // onkeydown 键盘被按下，不区分大小写
    // onkeypress 键盘被按下，区分大小写
    // onkeyup 键盘被释放
    // let tx = document.querySelector("#t")
    // 1、onkeydown 可以捕获所有键盘事件
    // tx.onkeydown = function(event){
    //     console.log("键盘正在按下");
    //     let a = event.keyCode // 具体哪个键盘对应的事件编码
    //     console.log(a)
    //     let b = String.fromCharCode(a) // 将编码转换成对应的字母（不区分大小写，主要是onkeydown事件）
    //     console.log(b)
    //     if(event.altKey){
    //         alert("alt键被按下")
    //     }
    //     if(event.shiftKey){
    //         alert("shift键被按下")
    //     }
    // }
    // 2、无法直接捕获ctrl/shif/alt/esc等这样的键盘事件，这些要通过event里面的对应属性来判断, onkeydown可以捕获
    // tx.onkeypress = function(event){
    //     console.log("键盘正在按下");
    //     let a = event.keyCode // 具体哪个键盘对应的事件编码
    //     console.log(a)
    //     let b = String.fromCharCode(a) // 将编码转换成对应的字母（不区分大小写，主要是onkeydown事件）
    //     console.log(b)
    // }
    // 3、onkeyup
    // tx.onkeyup = function() {
    //     console.log("按键被抬起")
    // }

    // 二、选择元素
    // 1、querySelector 选择选择器对应的一个元素
    // 参数可以是一个或者多个css选择器字符串
    // 只选中参数匹配的第一个元素对象
    // 可以在任何元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素
    // let elem1 = document.querySelector('.box');
    // console.log(elem1);
    // let elem2 = document.querySelector('#id');
    // console.log(elem2);
    // let elem3 = document.querySelector('h3 span input');
    // console.log(elem3);

    // // 2、querySelectorAll 选择选择器对应的所有元素
    // let elems = document.querySelectorAll('div');
    // console.log(elems);

    // 三、操作元素
    //（一）获取/修改元素内容
    // 1、属性innerText：属性表示一个节点及其后代的“渲染”文本内容
    // 不识别html标签，是非标准的(IE发起的)，读取结果不保留html源码中的换行和空格
    // 通过 innerText无法获取到div内部的html结构, 只能得到文本内容
    // var div = document.querySelector('div');
    // // 读取 div 内部内容
    // console.log(div.innerText);
    // // 修改 div 内部内容, 界面上就会同步修改
    // div.innerText = 'hello js <span>hello js</span>'; // 修改页面的时候也会把span标签当成文本进行设置，所有说innerText看不到文本内容

    //2、innerHTML：设置或获取HTML语法表示的元素的后代
    // 识别html标签，W3C标准的，读取结果保留html源码中的换行和空格
    // var div = document.querySelector('div');
    // // 下面两者的差别就是innerHTML获取的是div后代
    // // 读取页面内容
    // console.log(div);
    // console.log(div.innerHTML);
    // // 修改页面内容
    // div.innerHTML = '<span>hello js</span>'; //修改页面的时候会保留标签，同时也能修改结构

    //（二）、获取/修改元素属性
    // // 1、通过img对象获取属性
    // var img = document.querySelector('img');
    // // console.dir(img); // 这里采用dir方法打印元素属性
    // console.log(img.src); // http://127.0.0.1:5500/css/1.jpg
    // console.log(img.title);
    // console.log(img.alt);

    // // 2、通过img修改对象属性
    // var img = document.querySelector('img');
    // img.onclick = function () {
    //     if (img.src.lastIndexOf('1.jpg') !== -1){
    //         img.src = '../css/hot.png';
    //     }
    //     else{
    //         img.src = '../css/refresh.png';
    //     }
    // }

    //（三）获取/修改表单元素属性
    // 表单(主要是指input标签)的以下属性都可以通过DOM来修改
    // value:input的值
    // disabled:禁用
    // checked:复选框会使用
    // selected:下拉框会使用
    // type:input的类型(文本, 密码, 按钮, 文件等)

    // // 1、案例一：播放/暂停
    // let button = document.querySelector(".asume")
    // function startORStop(){
    //     if(button.value === "播放"){
    //         button.value = "暂停"
    //     }
    //     else{
    //         button.value = "播放"
    //     }
    // }

    // // // 2、案例二：点击计数
    // let inc = document.querySelector(".inc")
    // let dec = document.querySelector(".dec")
    // let cnt = document.querySelector(".cnt")
    // inc.onclick = function(){
    //     cnt.value = parseInt(cnt.value)+1
    // }
    // dec.onclick = function(){
    //     cnt.value = parseInt(cnt.value)-1
    // }

    //3、案例三: 全选/取消全选按钮
    // let all = document.querySelector(".box .all")
    // let select = document.querySelectorAll(".box .select")
    // // 设置all的点击事件：将所有选项选择/取消
    // all.onclick = function(){
    //     for(let i = 0; i < select.length; i++){
    //         select[i].checked = all.checked
    //     }
    // }

    // for(let i = 0; i < select.length; i++){
    //     select[i].onclick = function(){
    //         all.checked = isCheck(); // 给每个选项设置点击事件：如果所有选项选中则全选项也应该选中
    //     }
    // }

    // function isCheck(){
    //     for(let i = 0; i < select.length; i++){
    //         if(select[i].checked === false){
    //             return false;
    //         }
    //     }
    //     return true;
    // }

    //（四）获取/修改样式属性
    // CSS中指定给元素的属性, 都可以通过js来修改
    // 1、行内样式操作(两种不同的操作)
    // element.style.属性名 = 属性值;
    // element.style.cssText = 属性名+属性值;
    // "行内样式", 通过style直接在标签上指定的样式，优先级很高，适用于改的样式少的情况
    // 案例：点击字体变大
    // let style1 = document.querySelector(".style1")
    // style1.onclick = function(){
    //     let cur_font_size = parseInt(this.style.fontSize) // this可以替换成style1，this指向调用它的对象
    //     cur_font_size += 10
    //     // this.style.fontSize = cur_font_size + "px"
    //     this.style.cssText = "font-size:" + cur_font_size + "px" // 注意两种写法style.fontSize和font-size
    // }

    // 2、类名样式操作
    // 修改元素的CSS类名，适用于要修改的样式很多的情况
    // element.className = CSS类名;
    // 案例：开启夜间模式
    // let div = document.querySelector(".container")
    // div.onclick = function () {
    //     console.log(div.className);
    //     if (div.className.indexOf('light') !== -1) {
    //         div.className = 'container dark';
    //     } else {
    //         div.className = 'container light';
    //     }
    // }


    // 四、操作节点
    //（一）新增节点，分成两个步骤
    // 1. 创建元素节点
    // 2. 把元素节点插入到 dom 树中
    // 创建节点的方法很多
    // createElement 创建元素节点
    // createTextNode 创建文本节点
    // createComment 创建注释节点
    // createAttribute 创建属性节点
    // // 第一步：创建元素节点
    // var div = document.createElement('div'); // 创建一个div节点
    // div.id = 'mydiv';
    // div.className = 'second-level';
    // div.innerHTML = '我很好';
    // console.log(div); //<div id="mydiv" class="box">hehe</div>
    // // // 第二步：插入节点到dom树
    // // // 1、使用 appendChild 将节点插入到指定节点的最后一个孩子之后
    // // var first_level = document.querySelector('.first-level');
    // // first_level.appendChild(div);

    // // 2、使用 insertBefore 将节点插入到指定节点之前
    // // 语法：var insertedNode = parentNode.insertBefore(newNode, referenceNode)
    // // 如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾
    // let new_container = document.querySelector(".new-container")
    // console.log(new_container.children);
    // new_container.insertBefore(div, new_container.children[1])
    // // 注意：如果针对一个节点插入两次, 则只有最后一次生效(相当于把元素移动了)
    // // 注意：一旦一个节点插入完毕, 再针对刚刚的节点对象进行修改, 能够同步影响到 DOM 树中的内容

    //（二）删除节点
    // 使用 removeChild 删除子节点
    // oldChild = element.removeChild(child);
    // child：待删除节点，element：child的父节点，返回值为该被删除节点
    // 被删除节点只是从dom树被删除了, 但是仍然在内存中, 可以随时加入到dom树的其他位置 
    // 如果上例中的 child节点 不是 element 节点的子节点, 则该方法会抛出异常
</script>

</html>